<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>市场投资</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/all.css" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/self.js"></script>
</head>
<body  ontouchstart="">
<div class="detailTop pf w100 of">
     <div class="w100 of tc c3 f18">
         <span class="pa" style="left: 10px;font-size: 30px;color: #444444;" onclick="javascript:history.back();">&laquo;</span>
         市场投资
         <div class="dib of pa" style="right: 10px;">
             <a href="saveMoney.html" class="dib tc">资金转入</a>
         </div>
     </div>
</div>

<div class="container jz" style="margin-top: 41px;">
        <section class="proSection w100 bcfb">
            <form class="detailInfo w100 of">
                <label for="proKind" class="f18 c3 mgl10">产品类型</label>
                <select name="proKind"  id="proKind">
                    <option value="volvo" selected="selected">天猫币</option>
                    <option value="saab">天猫币2</option>
                    <option value="fiat">天猫币3</option>
                    <option value="audi">天猫币4</option>
                </select>
            </form>
        </section>


        <section id="introDetail" class="w100 of">
            <div class="w100 of bcfb">
                <ul class="picTab w100">
                    <li class="pictab_current">分时</li>
                    <li class="">1分钟<span class="line"></span></li>
                    <li class="">5分钟<span class="line"></span></li>
                    <li class="">60分钟<span class="line"></span></li>
                    <li class="">日<span class="line"></span></li>
                </ul>
                <div class="picTabBottomLine w100 "></div>
            </div>
            <div class="introtab_content w100 of bcf">
                <img src="images/gupiaoPic.jpg" class="db w100">
            </div>
        </section>
        <script>
//            tab切换
            $(function () {
                $('.picTab>li').mouseover(function () {
                    var $t = $(this).index();
                    $('.picTab>li').removeClass();
                    $(this).addClass('pictab_current');
                })
            })
        </script>

        <section class="w100 of bcfb">
            <div class="w100 of bcfb">
                <ul class="jiaoyiTab w100 bcf">
                    <li class="jiaoyiTab_current"> <img id="jiaoyi" src="images/jiaoyi1.png">交易</li>
                    <li class=""><img id="chicang" src="images/chicang.png" />持仓<span class="line"></span></li>
                    <li class=""><img id="jilu" src="images/jilu.png" style="height:21px"/>记录<span class="line"></span></li>
                    <li class=""><img id="wodezichan" src="images/wodezichan.png" style="height:20px" />我的资产<span class="line"></span></li>
                </ul>
                <div class="picTabBottomLine2 w100 "></div>
            </div>
            <div class="jiaoyiTab_content w100 of">
                <article class="articleJz" style="display: block;">
                    <div class="jydiv clearfix of">
                        <div class="fl cff9933">
                            <span class="f12 c3">当前价位</span><span class="mgl7 f14">&yen;</span><span class="f18">10.</span><span class="f14">00</span>
                        </div>
                        <div class="fr cff9933">
                            <span class="f12 c3">可用总资产</span><span class="mgl7 f14">&yen;</span><span class="f18">100,000.</span><span class="f14">52</span>
                        </div>
                    </div>
                    <div class="jydiv clearfix of">
                        <div class="fl cff9933">
                            <span class="f12 c3">转入资金</span><input type="number" name="" class="jyInput dib f12 c3 mgl7" />
                        </div>
                        <div class="fr cff9933">
                            <span class="f12 c3">可用总资产</span><span class="mgl7 f14">&yen;</span><span class="f18">100,000.</span><span class="f14">52</span>
                        </div>
                    </div>
                    <div class="clearfix of">
                        <div class="vsDiv pr of">
                            <a href="#" class="db f16 cf tc fl" style="background:#ff9933">看涨</a>
                            <a href="#" class="db f16 cf tc fr" style="background:#3399ff">看跌</a>
                            <div class="pa w100 h100" style="top:0;left: 0;">
                                <div class="w100 h100">
                                    <img src="images/vs.png" class="db jz">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="vciLine w100 pr">
                        <div class="pa w100">
                            <span class=" f12 c9">投资有风险  参与需谨慎</span>
                        </div>
                    </div>
                    <div class="w100 of mgt10 mgb32">
                        <p class="w100 tc f12 c9 mgt10">市场投资由《北京市上帝之手理财投资有限公司》提供服务</p>
                    </div>
                </article><!--交易-->
                <article class="#f2f2f2" style="width: 100%;margin-bottom: 0;">
                    <table class="redTable" border="0">
                        <thead class="f12 c3">
                            <tr>
                                <th>品种/市值</th>
                                <th>持仓/涨跌</th>
                                <th>市价/成本价</th>
                                <th>盈亏/盈亏比</th>
                            </tr>
                        </thead>
                        <tbody class="f13 cred">
                            <tr>
                                <td>天猫币</td>
                                <td>10000</td>
                                <td>12.56</td>
                                <td>+100,000.23</td>
                            </tr>
                            <tr>
                                <td>109,070.66</td>
                                <td>买跌</td>
                                <td>14.28</td>
                                <td>15.98%</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3"><p class="f11 c9 fl" >单号&nbsp;&nbsp;2016092642536-546798</p></td>
                                <td class="f13" colspan="1" style="color:#0066ff;">卖 出</td>
                            </tr>
                        </tfoot>

                    </table>
                    <section class="w100 tableLine"></section>
                    <table class="greenTable" border="0">
                        <tbody class="f13 cgreen">
                        <tr>
                            <td>天猫币</td>
                            <td>10000</td>
                            <td>12.56</td>
                            <td>+100,000.23</td>
                        </tr>
                        <tr>
                            <td>109,070.66</td>
                            <td>买跌</td>
                            <td>14.28</td>
                            <td>15.98%</td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="3"><p class="f11 c9 fl" >单号&nbsp;&nbsp;2016092642536-546798</p></td>
                            <td class="f13" colspan="1" style="color:#0066ff;">卖 出</td>
                        </tr>
                        </tfoot>

                    </table>
                </article><!--持仓-->
                <article class="#f2f2f2" style="width: 100%;margin-bottom: 0;">
                    <table class="redTable" border="0">
                        <thead class="f12 c3">		     		         		        			 金额(元)
                        <tr>
                            <th>品种</th>
                            <th>数量</th>
                            <th>涨跌</th>
                            <th>成本价</th>
                            <th colspan="2">金额(元)</th>
                        </tr>
                        </thead>
                        <tbody class="f13 cred">
                        <tr>
                            <td>天猫币</td>
                            <td>10000</td>
                            <td>买跌</td>
                            <td>12.56</td>
                            <td colspan="2">+100,000.23</td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="3"><p class="f12 c9 fl" >单号&nbsp;&nbsp;2016092642536-546798</p></td>
                            <td class="f12 c9" colspan="2">操作：买入</td>
                        </tr>
                        </tfoot>

                    </table>
                    <section class="w100 tableLine"></section>
                    <table class="greenTable" border="0">
                        <tbody class="f13 cgreen">
                        <tr>
                            <td>天猫币</td>
                            <td>10000</td>
                            <td>买涨</td>
                            <td>12.56</td>
                            <td colspan="2">+100,000.23</td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="3"><p class="f12 c9 fl" >单号&nbsp;&nbsp;2016092642536-546798</p></td>
                            <td class="f12 c9" colspan="2">操作：系统强平卖出</td>
                        </tr>
                        </tfoot>

                    </table>
                    <section class="w100 tableLine"></section>
                    <table class="greenTable" border="0">
                        <tbody class="f13 cgreen">
                        <tr>
                            <td>天猫币</td>
                            <td>10000</td>
                            <td>买涨</td>
                            <td>12.56</td>
                            <td colspan="2">+100,000.23</td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="3"><p class="f12 c9 fl" >单号&nbsp;&nbsp;2016092642536-546798</p></td>
                            <td class="f12 c9" colspan="2">操作：系统强平卖出</td>
                        </tr>
                        </tfoot>

                    </table>

                </article><!--记录-->
                <article class="articleJz">
                    <div class="jydiv clearfix of">
                        <div class="fl cff9933">
                            <span class="f12 c3">总资产</span><span class="mgl7 f14">&yen;</span><span class="f18">10.</span><span class="f14">00</span>
                        </div>
                        <div class="fr cff9933 tl" style="min-width:160px;">
                            <span class="f12 c3">总市值</span><span class="mgl7 f14">&yen;</span><span class="f18">100,000.</span><span class="f14">52</span>
                        </div>
                    </div>
                    <div class="jydiv clearfix of">
                        <div class="fl cred">
                            <span class="f12 c3">浮动盈亏</span><span class="mgl7 f14">&yen;</span><span class="f18">10.</span><span class="f14">00</span>
                        </div>
                        <div class="fr cred tl" style="min-width:160px;">
                            <span class="f12 c3">浮动盈亏率</span><span class="mgl7 f14">&yen;</span><span class="f18">30.</span><span class="f14">00 %</span>
                        </div>
                    </div>
                    <div class="jydiv clearfix of">
                        <div class="fl cff9933">
                            <span class="f12 c3">可用金额</span><span class="mgl7 f14">&yen;</span><span class="f18">10.</span><span class="f14">00</span>
                        </div>
                        <div class="fr cff9933 tl" style="min-width:160px;">
                            <span class="f12 c3">可转金额</span><span class="mgl7 f14">&yen;</span><span class="f18">100,000.</span><span class="f14">52</span>
                        </div>
                    </div>
                    <div class="vciLine w100 pr" style="margin-top: 30px;">
                    </div>
                    <div class="w100 of mgt10 mgb32">
                        <p class="w100 tc f12 c9 mgt10">您为合作方[七彩云购]用户，转出将转至您的七彩云购账户</p>
                    </div>
                    <div class="clearfix of">
                        <div class="vsDiv pr of">
                            <a href="saveMoney.html" class="db f16 cf tc fl" style="background:#ff9933">资金转入</a>
                            <a href="transferMoney.html" class="db f16 cf tc fr" style="background:#3399ff">资金转出</a>
                        </div>
                    </div>

                </article><!--我的资产-->
            </div>
        </section>
        <script>
            //            tab切换
            $(function () {
                $('.jiaoyiTab>li').click(function () {
                    var $t = $(this).index();
                    var iconImg =  $(this).children('img');
                    switch($t)
                    {
                        case 0:
                            $("#jiaoyi").attr("src","images/jiaoyi1.png");
                            $("#chicang").attr("src","images/chicang.png");
                            $("#jilu").attr("src","images/jilu.png");
                            $("#wodezichan").attr("src","images/wodezichan.png");
                            break;
                        case 1:
                            $("#jiaoyi").attr("src","images/jiaoyi.png");
                            $("#chicang").attr("src","images/chicang1.png");
                            $("#jilu").attr("src","images/jilu.png");
                            $("#wodezichan").attr("src","images/wodezichan.png");
                            break;
                        case 2:
                            $("#jiaoyi").attr("src","images/jiaoyi.png");
                            $("#chicang").attr("src","images/chicang.png");
                            $("#jilu").attr("src","images/jilu1.png");
                            $("#wodezichan").attr("src","images/wodezichan.png");
                            break;
                        case 3:
                            $("#jiaoyi").attr("src","images/jiaoyi.png");
                            $("#chicang").attr("src","images/chicang.png");
                            $("#jilu").attr("src","images/jilu.png");
                            $("#wodezichan").attr("src","images/wodezichan1.png");
                            break;
                    }


                    $('.jiaoyiTab>li').removeClass();
                    $(this).addClass('jiaoyiTab_current');
                    $('.jiaoyiTab_content>article').css('display', 'none');
                    $('.jiaoyiTab_content>article').eq($t).css('display', 'block');
                })
            })
        </script>


    </div>

</body>
</html>